<template>
  <div class="shouye">
    <!-- 轮播 -->
    <van-swipe :autoplay="1000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img v-lazy="item.url" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播下边得五大专区 -->
    <van-row class="top">
      <van-col @click="$router.push('/classify')">
        <div><img src="@/assets/image/huiyuan.png" alt=""></div>
        <span>商品分类</span>
      </van-col>
      <van-col @click="toYouxuan">
        <div><img src="@/assets/image/youxuan.png" alt=""></div>
        <span>优选卖场</span>
      </van-col>
      <van-col @click="toMiaosha">
        <div><img src="@/assets/image/miaosha.png" alt=""></div>
        <span>今日秒杀</span>
      </van-col>
      <van-col @click="sendMsg">
        <div><img src="@/assets/image/tuangou.png" alt=""></div>
        <span>团购</span>
      </van-col>
      <van-col>
        <div><img src="@/assets/image/tuijian.png" alt=""></div>
        <span>推荐位</span>
      </van-col>
    </van-row>
    <!-- 公告 -->
    <van-notice-bar text="今日大促销" left-icon="volume-o" />
    <!-- 今日秒杀 -->
    <div class="jrms">
      <!-- 上边得文字区 -->
      <div class="miaosha clearfix">
        <span class="ms">今日秒杀</span>
        <div class="ms1">18点场</div>
        <div class="ms2">
          <span>还剩</span> <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" auto-start />
        </div>
      </div>
      <!-- 下边的图片区 -->
      <van-row class="msxia">
        <van-col v-for="item in todayList" :key="item.id"><img :src="item.picture" alt=""><span>￥{{ item.price }}</span>
        </van-col>
      </van-row>

    </div>
    <!-- 特卖专区 -->
    <div class="tmzq">
      <h3>特卖专区</h3>
      <van-grid :column-num="2" >
        <van-grid-item v-for="item in todayList" :key="item.id" text="" @click="$router.push('/temai')">
          <img :src="item.picture" alt="">
        </van-grid-item>
      </van-grid>
      <!-- <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div> -->
    </div>
    <!-- 排行榜 -->
    <div class="phb">
      <h3>排行榜</h3>

      <van-grid :column-num="2">
        <van-grid-item v-for="item in topList" :key="item.id" @click="toDetail(item.id)">
          <div><img :src="item.picture" alt="">
            <span class="title">{{ item.shop }}</span>
            <span class="jg">{{ item.price }}</span>
            <span class="fk">{{ item.putaway }}人已付款</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 底部导航 -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import axios from 'axios'
import TabBar from '@/components/Mine/TabBar'
export default {
  components:{
    TabBar
  },
  data() {
    return {
      time:99999,
      banner: [],
      // 排行榜
      topList: [],
      todayList: []
    }
  },
  methods: {
    toMiaosha() {
      this.$router.push('/today')
    },
    toYouxuan() {
      this.$router.push('/youxuan')
    },
    //请求排行榜列表
    getToplist() {
      axios({
        method: 'get',
        url: '/api/shop/list',
        params: {
          pageSize: 10,
          pageNo: 2
        }
      }).then(res => {
        console.log('排行榜', res);
        if (res.data.resultCode == 1) {
          this.topList = res.data.resultInfo.list
        }
      })
    },
    //请求今日秒杀
    getToday() {
      axios({
        method: 'get',
        url: '/api/shop/list',
        params: {
          pageSize: 4,
          pageNo: 5
        }
      }).then(res => {
        console.log('今日秒杀', res);
        if (res.data.resultCode == 1) {
          this.todayList = res.data.resultInfo.list
        }
      })
    },
    //排行榜点击去详情
    toDetail(id) {
      console.log('排行榜ID', id);
      this.$router.push('/detail' + '?id=' + id)
    },
    //发送消息
    sendMsg(){
      axios({
        url:'/talk/reply',
        method:'post',
        data:{
            content:'你好',
            type:1,
            from:'京方电商'
        },
        headers:{
          "Api-Key":"n7eb5px0s32kwb9i",
          "Api-Secret":"ul4hp0s4",
          "Content-Type":"application/json;charset=UTF-8"
        }
      }).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  created() {
    //请求轮播图
    axios({
      method: 'get',
      url: '/api/shop/banner',
    }).then(res => {
      console.log(res);
      if (res.data.resultCode == 1) {
        this.banner = res.data.resultInfo.list
      }
    })
    //请求排行榜
    this.getToplist()
    //请求今日秒杀
    this.getToday()
  }
}
</script>

<style lang="scss" scoped>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}


.van-swipe {
  img {
    width: 100%;
    height: 200px;
  }
}

.shouye .top {
  padding: 20px 0;
  width: 100%;
  text-align: center;
  // border: 1px solid #000;
  display: flex;
  justify-content: space-around;

  img {
    width: 30px;
  }
}


// 秒杀
.miaosha {
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 20px;
  // border: 1px solid #000;
}

.miaosha .ms {
  float: left;
  color: #CD2897;
  font-size: 18px;
  font-weight: 900;
}

.miaosha .ms1 {
  float: left;
  border: 1px solid #CC0066;
  border-right: none;
  background-color: #CC0066;
  color: #fff;
}

.miaosha .ms2 {
  display: flex;
  float: left;
  border: 1px solid #CC0066;
  color: #CC0066;
  border-left: none;
}

// 文字下方的图片区
.shouye .msxia {
  padding-left: 20px;
  display: flex;
  justify-content: space-around;
  // border: 1px solid #000;
  text-align: center;
  width: 100%;

  .van-col {
    display: flex;
    flex-direction: column;
    // border: 1px solid #000;
  }

  img {
    width: 50px;
    // border: 1px solid #000;
  }

  span {
    color: #CC0066;
  }
}



// 特卖专区

.tmzq {
  h3 {
    color: #CC0066;
    margin-left: 10px;
  }
  img{
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
  }
}


// 排行榜


.phb h3 {
  color: #CC0066;
  margin-left: 10px;
}

.phb .van-grid-item div {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  padding-bottom: 10px;
}

.phb img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


.phb .title {
  display: block;
  // border: 1px solid #000;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phb .jg {
  color: #CC0066;
  font-size: 20px;
  font-weight: bold;
}

.phb .fk {
  float: right;
  margin-right: 10px;
}
</style>
